<template>
  <div class="main app-container">
    <div class="main-container">
      <div class="cbox">
        <el-form class="form" :model="fltForm" label-width="10rem" :inline="true" ref="fltForm" size="mini">
          <el-form-item size="mini" label="场站代码：" prop="staCd">
            <el-input clearable maxlength="32" v-model="fltForm.staCd" size="mini" style="width: 100%"></el-input>
          </el-form-item>

          <el-form-item size="mini" label="场站中文名：" prop="staCname">
            <el-input clearable maxlength="32" v-model="fltForm.staCname" size="mini" style="width: 100%"></el-input>
          </el-form-item>

          <el-form-item label-width="13rem" size="mini" label="场站英文名：" prop="staEname">
            <el-input clearable maxlength="32" v-model="fltForm.staEname" size="mini" style="width: 100%"></el-input>
          </el-form-item>

          <el-form-item size="mini" label-width="10px">
            <el-button size="mini" type="primary" @click="searchList">查询</el-button>
          </el-form-item>

          <el-row :gutter="10" class="row">
            <el-col :span="24">
              <el-form-item size="mini" label-width="0px">
                <el-button size="mini" type="primary" plain @click="addNew">新增</el-button>
                <el-button size="mini" type="primary" plain @click="edit">编辑</el-button>
                <el-button size="mini" type="primary" plain @click="del">删除</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="table">
        <div class="inner" ref="inner">
          <el-table :height="maxHeight" style="width: 100%" :data="terminalyardList" :highlight-current-row="true" @row-click="rowClick" border :header-cell-style="{
              textAlign: 'center'
            }"
            @row-dblclick="view">
            <el-table-column align="center" width="60" label="序号" :index="indexMethod" type="index"></el-table-column>
            <el-table-column align="left" show-overflow-tooltip label="场站代码" prop="staCd"></el-table-column>
            <el-table-column align="left" show-overflow-tooltip label="所属国家" prop="staCtyuuidName"></el-table-column>
            <el-table-column align="left" show-overflow-tooltip label="所属省" prop="staReguuidName"></el-table-column>
            <el-table-column align="left" show-overflow-tooltip label="所属市" prop="staCtuuidName"></el-table-column>
            <el-table-column align="left" show-overflow-tooltip label="场站中文名" prop="staCname"></el-table-column>
            <el-table-column align="left" show-overflow-tooltip label="场站英文名" prop="staEname"></el-table-column>
            <el-table-column align="center" show-overflow-tooltip label="场站X坐标" prop="staX"></el-table-column>
            <el-table-column align="left" show-overflow-tooltip label="场站Y坐标" prop="staY"></el-table-column>
            <el-table-column align="center" show-overflow-tooltip label="输入时间" prop="staInsertdt"></el-table-column>
            <el-table-column align="center" show-overflow-tooltip label="输入员工" prop="staInsertuser"></el-table-column>
            <el-table-column align="center" show-overflow-tooltip label="最后修改时间" prop="staLstupddt"></el-table-column>
            <el-table-column align="center" show-overflow-tooltip label="最后修改员工" prop="staLstupduser"></el-table-column>
            <el-table-column align="center" show-overflow-tooltip label="备注" prop="staRemark"></el-table-column>
            <el-table-column align="center" show-overflow-tooltip label="是否有效" prop="staIsvalid"></el-table-column>
          </el-table>
        </div>
      </div>
      <el-pagination
        class="pagination"
        small
        background
        ref="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Pagination.currentPage"
        :page-sizes="Pagination.pageSizeList"
        :page-size="Pagination.pageSize"
        :layout="Pagination.layout"
        :total="Pagination.total">
      </el-pagination>
      <el-dialog
        v-el-drag-dialog
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-if="showDialog"
        :visible.sync="showDialog"
        :title="operate">
        <v-dialog
          :disabled="!isEditMode"
          :portCode="!portCode"
          :currentMsg="currentMsg"
          @close="closeEdit"
          @save="saveFltInfo"
          :flt_info="currentFltInfo">
        </v-dialog>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import VDialog from './dialog'
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
import {
  delStationService,
} from '@/request/api'
const DIALOG_MODE = {
  ADD: '新增',
  EDIT: '编辑',
  VIEW: '详情'
}

import {
  getStationService,
} from '@/request/api'

export default {
  name: 'router.terminalYard',
  mixins: [resizeMixin, paginationMixin],
  data() {
    return {
      cityList: [],
      fltForm: {
        staCd: '', // 场站代码
        staCname: '', // 场站中文名
        staEname: '', // 场站英文名
      },
      terminalyardList: [], // 表格数据
      isEditMode: true,
      portCode: true,
      operate: '',
      showDialog: false,
      currentRow: {}, // 主表当前行数据
      currentFltInfo: '',
      maxHeight: -1,
      currentMsg: '', // 传给子组件的当前行数据
    }
  },
  computed: {
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 查询
    searchList() {
      this.getList()
    },
    // 重写的获取列表数据的方法
    getList() {
      // this.clearState()
      let needArr = Object.assign(this.fltForm,{PageIndexs: this.Pagination.currentPage},{PageSizes: this.Pagination.pageSize})
      getStationService(needArr).then(res => {
        if(res.success == 1) {
          this.terminalyardList = res.data.FTKJWLHYPT
        }
      })
    },
    // 新增
    addNew() {
      this.operate = DIALOG_MODE.ADD
      this.isEditMode = true
      this.portCode = true
      this.currentFltInfo = 'add'
      this.currentMsg = ''
      this.showDialog = true
    },
    edit() {
      if (Object.keys(this.currentRow).length == 0) {
        this.$alert('请选择需要编辑的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.operate = DIALOG_MODE.EDIT
      this.isEditMode = true
      this.portCode = false
      this.currentFltInfo = 'edit'
      this.currentMsg = this.currentRow
      console.log(this.currentMsg)
      this.showDialog = true
    },
    del() {
      if(Object.keys(this.currentRow).length == 0) {
        this.$alert('请选择一条数据','提示',{
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('您确认要删除选定的数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delStationService({staUuid: this.currentRow.staUuid}).then(res => {
          if(res.success == 1) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.currentRow = ''
            this.getList()
          }
        })
      }).catch(() => {
      })
    },
    view (row) {
      this.operate = DIALOG_MODE.VIEW
      this.isEditMode = false
      this.currentMsg = row
      this.showDialog = true
    },
    saveFltInfo(info) {
      this.showDialog = info
      this.getList()
    },
    closeEdit() { this.showDialog = false },

    rowClick(row) { this.currentRow = row },

  },
  components: {
    VDialog
  },

  created() {
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  height: 100%;
  position: relative;
  width: 100%;
}
.main-container {
  height: 100%;
  width: 100%;
  position: relative;
  // padding: 0 12px;
  display: flex;
  flex-direction: column;
  .form {
    width: 100%;
    flex: 0 0 auto;
    .row {
      width: 100%;
      // margin: 10px 0;
      margin-bottom: 0;
    }
  }
  .table {
    flex: 1;
    overflow: hidden;
    position: relative;
    .inner {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }
}
</style>
